﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        </script>
    </head>

<body>
    <canvas id="demoCanvas" width="500" height="500">
        <p>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</p>
    </canvas>
    <!---下面将演示一种绘制矩形的demo--->
    <script type="text/javascript">
        
        //第一步：获取canvas元素
        var canvasDom = document.getElementById("demoCanvas");
        //第二步：获取上下文
        var context = canvasDom.getContext('2d');
        //第三步：指定绘制线样式、颜色
        context.strokeStyle = "red";
        //第四步：绘制矩形
        context.strokeRect(10, 10, 100, 100);

        //以下演示填充矩形
        context.fillStyle = "blue";
        context.fillRect(110,110,100,100);

    </script>
</body>
</html>
